<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/2.3.0/weui.min.css" />
</head>

<body>
    <header>
        <a href="my.html"><i class="iconfont icon-leftarrow f28" id="return-01"></i></a>
        <span class="f16">个人资料</span>
    </header>
    <main>
    
        <!-- 头像 -->
        <div class="weui-cells">
            <a class="weui-cell  weui-cell_access" href="javascript:">
                <div class="weui-cell__bd">
                    <p>更换头像</p>
                </div>
                <div class="weui-cell__ft">
                    <img alt="" id="headPicVal">
                    <input type="file" name="" id="upLoadPic" style="display: none;">
                </div>
            </a>
        </div>

      
    

        <!-- 昵称 -->
        <div class="weui-cell weui-cell_active weui-cell_access">
            <span class="weui-cell__bd">
              <span class="demo_badge_title nick-name">昵称</span>
            </span>
            <span class="nick-name">
              <input class="weui-input" type="text" value="用户名" id='nickNameVal' placeholder="请输入昵称"/>
            </span>
          </div>
          <!-- 性别 -->
          <div class="weui-cell weui-cell_active weui-cell_access" id="sex">
            <span class="weui-cell__bd">
              <span class="demo_badge_title">性别</span>
            </span>
            <span class="weui-cell__ft" id="sexVal"></span>
          </div>
        <!-- 生日 -->
          <!-- 生日 -->
      <div class="weui-cell weui-cell_active weui-cell_access" id="birthday">
        <span class="weui-cell__bd">
          <span class="demo_badge_title">生日</span>
        </span>
        <span class="weui-cell__ft" id="birthdayVal"></span>
      </div>
        <!-- 所在省份 -->
        <div class="weui-cell weui-cell_active weui-cell_access" id="province">
            <span class="weui-cell__bd">
              <span class="demo_badge_title">所在省份</span>
            </span>
            <span class="weui-cell__ft" id="provinceVal"></span>
          </div>
          <!-- 所在城市 -->
         <!-- 所在城市 -->
      <div class="weui-cell weui-cell_active weui-cell_access" id="city">
        <span class="weui-cell__bd">
          <span class="demo_badge_title">所在城市</span>
        </span>
        <span class="weui-cell__ft" id="cityVal"></span>
      </div>
          <!-- 文本域 -->
          <div class="weui-cells">
            <div class="weui-cells__title" style="font-size: 17px;color: #101010;">个人简介</div>
            <div class="weui-cells weui-cells_form">
                <div class="weui-cell ">
                    <div class="weui-cell__bd">
                        <textarea class="weui-textarea" placeholder="请输入属于你的个人简介" rows="3" id="info" value=""></textarea>
                        <div class="weui-textarea-counter"><span id="num">0</span>/20</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="container mt20">
            <button class="ipt" style="background-color:#4294FF" id="updateBtn">保存信息</button>
            <div class="mt20"></div>
        </div>
    </main>
    
    
    <script src="https://res.wx.qq.com/open/libs/weuijs/1.2.1/weui.min.js" charset="utf-8"></script>
</body>

